<template>
  <div class="index-card">
    <ConditionBox>
      <template #left>
        <div class="title">考核维度</div>
      </template>
      <template #right></template>
    </ConditionBox>
    <a-divider />
    <a-table :columns="columns" :data="templateData" :pagination="false">
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
      <template #optional="{ record, rowIndex }">
        <a-tooltip content="编辑">
          <IconFont
            type="icon-edit"
            :size="26"
            :style="{
              marginRight: '10px',
              cursor: 'pointer'
            }"
            @click="goEdit(record, rowIndex)"
          />
        </a-tooltip>
        <a-tooltip content="删除" position="left">
          <a-popconfirm content="是否确认删除该条数据?" @ok="del(rowIndex)">
            <icon-font
              type="icon-delete"
              :size="26"
              :style="{
                cursor: 'pointer',
                marginRight: '10px'
              }"
            />
          </a-popconfirm>
        </a-tooltip>
      </template>
    </a-table>
    <a-button v-if="!props.review" type="text" @click="add"
      >新增考核维度</a-button
    >
  </div>
  <ToolsDrawer
    v-model:visible="drawerVisible"
    @submit="submit"
    :data="currData"
  />
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAssessmentTemplateDimensionality } from '@/apis/management/performance/baseSetting/template/type';
import ToolsDrawer from './ToolsDrawer.vue';
const props = withDefaults(
  defineProps<{
    data?: PerformanceAssessmentTemplateDimensionality[];
    review?: boolean;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'handleOk', 'update:data']);
const handleOk = () => {
  emit('handleOk');
};
const templateData = ref<PerformanceAssessmentTemplateDimensionality[]>([]);
watch(
  () => props.data,
  () => {
    templateData.value = cloneDeep(props.data) || [];
  },
  { deep: true }
);
const columns = ref<any>([
  {
    title: '序号',
    dataIndex: '',
    slotName: 'index'
  },
  {
    title: '考核维度名称',
    dataIndex: 'name'
  },
  {
    title: '考核工具',
    dataIndex: 'type'
  },
  {
    title: '配分/权重',
    dataIndex: 'weight'
  }
]);
onMounted(() => {
  if (!props.review) {
    columns.value.push({
      title: '操作',
      dataIndex: 'optional',
      slotName: 'optional',
      width: 200
    });
  }
});
const currData = ref<PerformanceAssessmentTemplateDimensionality>({});
const drawerVisible = ref(false);
const add = () => {
  currData.value = {};
  drawerVisible.value = true;
};
const edit = (data: PerformanceAssessmentTemplateDimensionality) => {
  currData.value = data;
  change;
};

const change = () => {
  emit('update:data', templateData.value);
};
const submit = (data: PerformanceAssessmentTemplateDimensionality) => {
  templateData.value.push(data);
  change();
};
const del = (index: number) => {
  if (!templateData.value?.length) return;
  templateData.value.splice(index, 1);
  change();
};
const editIndex = ref(-1); //编辑项的下标，用以判断新增和编辑，下标小于0是新增数据。大于等于0则是修改此下标的值
const goEdit = (
  data: PerformanceAssessmentTemplateDimensionality,
  index: number
) => {
  editIndex.value = index;
  currData.value = data;
  drawerVisible.value = true;
};
</script>

<style lang="less" scoped>
.index-card {
  border-radius: 10px;

  margin: 20px 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  padding: 20px;
  .title {
    font-weight: 600;
    font-size: 18px;
  }
}
</style>
